getGuitarList()
//查询
function getGuitarList() {
    axios({
        url:"http://localhost:8080/guitar"
    }).then(result => {
        console.log(result.data.data)
        const guitarList = result.data.data
        const htmlStr = guitarList.map((item,index) => {
            return `
                <tr>
                    <td>${index + 1}</td>
                    <td>${item.brandName}</td>
                    <td>${item.gridNum}</td>
                    <td>${item.picker}</td>
                    <td>${item.string}</td>
                    <td>${item.model}</td>
                    <td>${item.color}</td>
                    <td>${item.fingerBoard}</td>
                    <td>${item.productCountry}</td>
                    <td>${item.price}</td>
                    <td data-id = ${item.id}><button type="button" class="edit">编辑</button><button type="button" class="del">删除</button></td>
                </tr>`
        }).join('')
        document.querySelector(".list").innerHTML = htmlStr
    })
}
//删除
document.querySelector(".list").addEventListener('click', e => {
    if (e.target.classList.contains('del')) {
        const theId = e.target.parentNode.dataset.id
        console.log(theId)
        axios({
            url: `http://localhost:8080/guitar/${theId}`,
            method:"delete"
        }).then(()=> {
            getGuitarList()
        })
    }
})
//增加
function openModal() {
    document.getElementById("myModal").style.display = "block";
}
function openModal2() {
    document.getElementById("myModal2").style.display = "block";
}
function closeModal() {
    document.getElementById("myModal").style.display = "none";
    document.getElementById("infoForm").reset()
}
function closeModal2() {
    document.getElementById("myModal2").style.display = "none";
    document.getElementById("infoForm2").reset()
}
document.getElementById("infoForm").addEventListener("submit", function(event) {
    event.preventDefault();
    const brandName = document.getElementById("infoForm").elements["brandName"].value;
    const gridNum = document.getElementById("infoForm").elements["gridNum"].value;
    const picker = document.getElementById("infoForm").elements["picker"].value;
    const string = document.getElementById("infoForm").elements["string"].value;
    const model = document.getElementById("infoForm").elements["model"].value;
    const color = document.getElementById("infoForm").elements["color"].value;
    const fingerBoard = document.getElementById("infoForm").elements["fingerBoard"].value;
    const productCountry = document.getElementById("infoForm").elements["productCountry"].value;
    const price = document.getElementById("infoForm").elements["price"].value;
    // 处理用户输入的信息，可以发送给后端处理或者进行其他操作
    const data = {brandName,gridNum,price,picker,string,model,color,fingerBoard,productCountry}
    console.log(data)
    axios({
        url:'http://localhost:8080/guitar',
        method: "post",
        data
    }).then(result => {
        console.log(result)
        getGuitarList()
        document.getElementById("infoForm").reset()
    })
    closeModal(); // 提交完成后关闭弹窗
});
//修改
document.querySelector(".list").addEventListener("click", evt => {
    if (evt.target.classList.contains('edit')){
        const theId = evt.target.parentNode.dataset.id
        axios({
            url:`http://localhost:8080/guitar/${theId}`,
        }).then((result) => {
            const guitar = result.data.data
            openModal2()
            document.getElementById("brandName2").value = guitar.brandName
            guitar.gridNum === 22 ? document.getElementById("222").checked = true:document.getElementById("24").checked = true
            document.getElementById("picker2").value = guitar.picker
            document.getElementById("string2").value = guitar.string
            document.getElementById("model2").value = guitar.model
            document.getElementById("color2").value = guitar.color
            document.getElementById("fingerBoard2").value = guitar.fingerBoard
            document.getElementById("productCountry2").value = guitar.productCountry
            document.getElementById("price2").value = guitar.price

            document.getElementById("infoForm2").addEventListener("submit", function(event) {
                event.preventDefault();
                const brandName = document.getElementById("infoForm2").elements["brandName"].value;
                const gridNum = document.getElementById("infoForm2").elements["gridNum"].value;
                const picker = document.getElementById("infoForm2").elements["picker"].value;
                const string = document.getElementById("infoForm2").elements["string"].value;
                const model = document.getElementById("infoForm2").elements["model"].value;
                const color = document.getElementById("infoForm2").elements["color"].value;
                const fingerBoard = document.getElementById("infoForm2").elements["fingerBoard"].value;
                const productCountry = document.getElementById("infoForm2").elements["productCountry"].value;
                const price = document.getElementById("infoForm2").elements["price"].value;
                // 处理用户输入的信息，可以发送给后端处理或者进行其他操作
                const id = evt.target.parentNode.dataset.id
                const data = {id,brandName,gridNum,price,picker,string,model,color,fingerBoard,productCountry}
                console.log(data)
                axios({
                    url:`http://localhost:8080/guitar`,
                    method: "put",
                    data
                }).then(result => {
                    console.log(result)
                    closeModal2();
                    getGuitarList()
                })
            });
        })
    }
})

